import React, { Component, createRef } from 'react'
// import Child1 from './components/Child1'
// import Users from './components/Users';
// import Users2 from './components/Users2';

import Sub from './components/Sub'

// 只有在类组件中才有生命周期
export default class App extends Component {

  constructor(props) {
    super(props);
    // 定义一个成员属性用于ref引用的变量
    this.child = createRef()
  }


  state = {
    username: 'admin',
    sex: '男',
    count: 1
  }

  /* componentDidMount() {
    setTimeout(() => {
      console.log('settimeout');
      this.setState({
        username: 'user'
      })
    }, 3000);
  } */

  render() {
    return (
      <div>
        {/* <Users username={this.state.username} /> */}
        {/* <Users2 username={this.state.sex} /> */}
        {/* <Child1 ref={this.child} setCount={this.setCount.bind(this)} />
        <hr />
        <button onClick={this.fn.bind(this)}>修改一下子组件中的内容</button>
        <hr />
        <h3>{this.state.count}</h3> */}

        <Sub />


      </div>
    )
  }

  fn() {
    // 通过ref得到子组件的实例对象
    const child = this.child.current
    // 调用子组件中的方法
    child.setTitle()

    // console.log(child.state.title);
  }
  setCount() {
    this.setState(prevState => {
      return { count: ++prevState.count };
    });
  }
}
